<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>CSS 提示信息实例</title>
    <style>
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 1s;
        }

        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>

    <body style="text-align:center;">

        <h2>提示工具</h2>
        <p>鼠标移动到以下文本:</p>

        <div class="tooltip">鼠标移动到这里
            <span class="tooltiptext">提示文本</span>
        </div>

    </body>
</body>

</html>